<template>
	<div class="luckdraw">
		<div class="turntable-bg">
            <div class="pointer" @click="pointer"><img src="../assets/images/luckdraw_start.png" alt="pointer"></div>
            <div class="rotate"><img id="rotate" src="../assets/images/luckdraw_gift.png" alt="turntable"></div>
        </div>
	</div>
</template>

<script type="text/javascript">
	import rotate from '../../static/js/awardRotate.js';
	export default{
		data(){
			return {
				unbind:true,
				bRotate:false,
				result_show:false,
				result_img:"",
				result_txt:"",
				msgContent:"",
				msgShow:false,
				number:0,
			}
		},
		props:['show','img','txt','msgshow'],
		watch:{
			result_show(){
				this.$emit("listentShow",this.result_show)
			},
			result_img(){
				this.$emit("listentImg",this.result_img)
			},
			result_txt(){
				this.$emit("listenTxt",this.result_txt)
			},
			show(){
				this.result_show = this.show;
			},
			msg(){
				console.log(this.msg);
				this.$emit("listentalertmsgShow",this.msg)
			},
			number(){
				this.$emit("listenNumber",this.number)
			},
			msgContent(){
				this.$emit("listentmsgContent",this.msgContent)
			},
			msgShow(){
				this.$emit("listentmsgShow",this.msgShow)
			},
			msgshow(){
				this.msgShow = this.msgshow;
			}
		},
		beforeMount(){
			this.drawLimit();
			this.drawNum(this.$store.getters.user.token);
		},
		methods:{
			rotateTimeOut(){
				$('#rotate').rotate({
					angle:0,
					animateTo:2160,
					duration:8000,
					callback:function (){
						alert('网络超时，请检查您的网络设置！');
					}
				});
			},
			rotateFn(awards, angles, txt){
				this.bRotate = !this.bRotate;
				var _that = this;
				$('#rotate').stopRotate();
				$('#rotate').rotate({
					angle:0,
					animateTo:angles+2160,
					duration:10000,
					callback(){
						var imgurl="";
						if(awards < 5){
							imgurl="http://m.mxzhuawawa.com/src/img/red.png";
						}else if(awards > 4 && awards < 8){
							imgurl="http://m.mxzhuawawa.com/src/img/luckdraw_jinbi.png";
						}else if(awards == "8"){
							mgurl="http://m.mxzhuawawa.com/src/img/rechrage_100.png";
						}else if(awards == "9"){
							mgurl="http://m.mxzhuawawa.com/src/img/luckdraw_lian.png";
						}
						_that.result_img = imgurl;
						_that.result_txt = txt;
						_that.result_show = true;
						_that.unbind=true;
						_that.bRotate = !_that.bRotate;
					}
				})
			},
			pointer(){
				if(this.bRotate)return;
				if(this.unbind){
					this.$jsonp(`${this.URL_PREFIX}/OpenAPI/v1/Luckdraw/luckDraw`,{token:this.$store.getters.user.token}).then((response) => {
		              console.log(response)
		              if(response.code=="0"){
			                var item =response.data.num;
				        	switch (item) {
								case '1':
									//var angle = [88, 137, 185, 235, 287];
									this.rotateFn(1, 360, response.data.title);
									break;
								case '2':
									//var angle = [137, 185, 235, 287];
									this.rotateFn(2, 320, response.data.title);
									break;
								case '3':
									//var angle = [137, 185, 235, 287];
									this.rotateFn(3, 280, response.data.title);
									break;
								case '4':
									//var angle = [185, 235, 287];
									this.rotateFn(4, 240, response.data.title);
									break;
								case '5':
									//var angle = [185, 235, 287];
									this.rotateFn(5, 200, response.data.title);
									break;
								case '6':
									//var angle = [235, 287];
									this.rotateFn(6, 160, response.data.title);
									break;
								case '7':
									//var angle = [287];
									this.rotateFn(7, 120, response.data.title);
									break;
								case '8':
									//var angle = [287];
									this.rotateFn(8, 80, response.data.title);
									break;
								case '9':
									//var angle = [287];
									this.rotateFn(9, 40, response.data.title);
									break;
							}
							this.drawNum(this.$store.getters.user.token);
			            }else{
			                this.msgContent = response.msg
			                this.msgShow = true;
			            }
		  		 	})
				}
				this.unbind=false;
			},
			drawNum(token){
				this.$jsonp(`${this.URL_PREFIX}/OpenAPI/v1/Luckdraw/drawNum`,{token:token}).then((response) => {
		              console.log(response)
		              if(response.code=="0"){
		              	this.number = response.data;
		            }else{
		            	this.number = "0";
		            }
		  		})
			},
			
			drawLimit(){
				this.$jsonp(`${this.URL_PREFIX}/OpenAPI/v1/Luckdraw/drawLimit`,{token:this.$store.getters.user.token}).then((response) => {
		              console.log(response)
		                var Li='';
			            var list=response.data;
			            if(list.length>0){
			            	for(var i=0;i<list.length;i++){
				            	Li+='<li>'+list[i]['nickname']+'<span>成功获得了'+list[i]['draw_title']+'</span></li>';
				            }
			            }else{
			            	for(var i=0;i<10;i++){
				            	Li+='<li>没有记录</li>';
				            }
			            }
			            $(".luckdraw_footer #scroll").html(Li);
		  		})
			}
		}
	}
</script>

<style scoped>
.luckdraw .turntable-bg{width:90%;margin:0 auto;padding:10%;padding-bottom:14%;position: relative;background:url(../assets/images/luckdraw_bg.png) no-repeat center top;background-size: cover;}
.luckdraw .turntable-bg .pointer{width:28%;position:absolute;left:36%;top:24%;z-index:8}
.luckdraw .turntable-bg .pointer img{width:100%;display: block;}
.luckdraw .turntable-bg .rotate{width:100%;}
.luckdraw .turntable-bg .rotate img{width:100%;display: block;}
</style>